<template>
  <div class="checkboxOptions">
    <el-dialog title="批量编辑选择项" :visible.sync="dialogVisible">
      <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="tableData"></el-input>
      <!-- <div class="list">
        <p v-for="(opt,index) in tableData" :key="index">{{opt.VAL}}</p>
      </div>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "checkboxOptions",
  // props: {
  //   optionList: {
  //     type: Array,
  //     default(){
  //       return []
  //     }
  //   }
  // },
  // watch:{
  //   optionList(optList){
  //     let list = "";
  //     for(let i = 0; i < optList.length; i++){
  //       let item = optList[i].VAL;
  //       list += item + "\n";
  //     }
  //     this.tableData =   list;
  //   }
  // },
  data() {
    return {
      dialogVisible: false,
      selectedIndex: [],
      tableData:""
      // tableData: "复选框 A\n复选框 B\n复选框 C",
    };
  },
  methods: {
    open(optList) {
      let list = "";
      for(let i = 0; i < optList.length; i++){
        let item = optList[i].VAL;
        list += item + "\n";
      }
      this.tableData =   list;
      this.dialogVisible = true;
    },
    confirm() {
      let itemArr = this.tableData.split("\n");
      let arr = [];
      for(let i = 0; i < itemArr.length; i++){
          let item = itemArr[i].trim();
          if(item){
            arr.push({
              VAL: item,
              CHKED: "0"
            })
          }
      }
      this.$emit("selectedList", arr);
      this.dialogVisible = false;
    },
  },
  mounted(){
    
  }
};
</script>
<style lang="scss" scoped>
.list {
  border: 1px solid #ddd;
  padding: 10px;
  line-height: 24px;
}
</style>